<template>
	<view class="wap pb100">
		<view class="user_vis row">
			<view class="col_5">
				<view class="cover" @click="previewImage(userInfo.HeadImgUrl)">
					<image :src="userInfo.HeadImgUrl" mode="aspectFill" />
				</view>
			</view>
			<view class="col_19">
				<view class="f1 c1 fwb d1">{{ userInfo.Name }}</view>
			</view>
		</view>

		<view class="bg">
			<view class="group" @click="nav_to('/pages/ball/ball_site')">
				<view class="lab">滑雪场地:</view>
				<view class="inp_box">
					<input v-model="ShopName" type="text" disabled placeholder="请选择滑雪场" />
				</view>
				<view class="icon_box"><uni-icons type="right" size="20" color="#E7E7E7"></uni-icons></view>
			</view>

			<view class="tip f2 c2" v-if="shop.IsOpenMember == 1">
				提示：本场不能直接预订，可能需要会籍或人满，如果你有会籍可以先组局，再让客服预订
			</view>

			<view class="group" @click="showTime = true">
				<view class="lab">滑雪时间:</view>
				<view class="inp_box">
					<input :value="dateTime" type="text" disabled placeholder="请选择滑雪时间" />
				</view>
				<view class="icon_box"><uni-icons type="right" size="20" color="#E7E7E7"></uni-icons></view>
			</view>
		</view>
		<view class="f3 c2 mt20">
			温馨提示：向会员约球会员会收取下场费用,下场费用不包含场地费,场地约球人自行预定,也可以找客服预定；
		</view>

		<view class="mt100">
			<view class="btn" @click="sub">预约滑雪</view>
		</view>

		<!-- 时间选择 -->
		<u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showTime" mode="datetime"
			@cancel="showTime = false" @confirm="setTime"></u-datetime-picker>

		<u-popup :show="reward.show" mode="bottom" @close="reward.show = false" :round="10">
			<view class="reward_content">
				<view class="title">
					附赠约球礼物
				</view>
				<view class="group" @click="setReward">
					<view class="lab">
						礼物数量:
					</view>
					<view class="inp_box">
						<view class="">
							<input type="text" v-model="reqData.reward" disabled>
							<image class="uni_icon" src="https://golfapi.xiaojusmart.com/Data/gift/icon_hua.png" mode=""></image>
						</view>
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="18" color="#E7E7E7"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="confirmSubReward">
					确定赠送
				</view>
				<view class="c_btn" @click="confirmSub">
					不赠送礼物约球
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payPrice: 0,
				localList: [],
				// 时间
				minDate: new Date().getTime(),
				showTime: false,
				ShopName: '',
				AppointmentID: '',
				reqData: {
					ShopID: '',
					reward: 2000,
					Remark: '',
					Price: '',
					ServerDate: '',
					ServerTime: '',
					IsPayRegisterFee: 0,
					RegisterFee: '',
					ItemStr: '',
					FeeRule: '组局者承担',
					PeopleNum: 1,
					IsOpen: 1,
					Title: '预约球局',
					WomenNum: 0,
					City: '',
					AppointmentType: '私人球局',
					Longitude: '',
					Latitude: '',
					Place: ''
				},
				reward: {
					show: false
				},
				shop: {},
				invite: {},
				inviteId: '',
				userInfo: {},
				ballInfo: {},
			};
		},
		onLoad(e) {
			let _this = this;
			this.inviteID = e.inviteId;
			this.getInviteUser();

			this.$api.post('/Common/Add_ViewPath', { Path: 'spheroid', Platform: uni.getStorageSync('platform') });

			uni.$on('reward', async data => {
				this.reqData.reward = data
			});

			uni.$on('site', async data => {
				_this.ShopName = data.ShopName;
				_this.reqData.ShopID = data.ID;
				_this.reqData.RegisterFee = data.Price;
				_this.payPrice = data.Price;
				_this.shop = data;
				let res = await _this.$util.getGeocoder(data.Address);
				this.reqData.City = res.result.address_components.city;
				this.reqData.Longitude = data.Longitude
				this.reqData.Latitude = data.Latitude
			});
			uni.$on('custom', async data => {
				this.ShopName = data.Place
				this.reqData.ShopID = 0
				this.reqData.Place = data.Place
				this.reqData.Longitude = data.Longitude
				this.reqData.Latitude = data.Latitude
			})
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		onUnload() {
			uni.$off('site')
			uni.$off('reward')
			uni.$off('custom')
		},
		methods: {

			setReward() {
				this.nav_to(`/pages/ball/ball_reward`)
			},

			async getInviteUser() {
				let res = await this.$api.post('User/GetUserInfo', { ID: this.inviteID });
				this.userInfo = res.data;
				console.log(res);
			},

			async confirmSubReward() {
				this.reqData.hasReward = true
				const res = await this.checkUser()
				if (!res.data) {
					this.$pv.msg(res.message)
					return
				}

				let pres = await this.$api.post('/Payment/PayV2', {
					EventID: res.data.AppointmentID,
					CompanyID: 6002,
					total_fee: this.total_reward,
					body: '发起球局',
					EventType: '球局奖励',
					SourcePage:'spheroid',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功					
					this.$pv.msg('邀请已发，请等待对方确认');

					await this.openMsg();

					this.nav_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);

					return;
				}

				let payObj = JSON.parse(pres.data);
				console.log(payObj);
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async (r) => {
						this.$pv.msg('邀请已发，请等待对方确认');
						await this.openMsg();
						// this.nav_back(1000);

						this.nav_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);

					},
					fail: (err) => {
						console.log(err);
						this.$pv.msg('支付失败');
					}
				});


			},

			// 无奖励
			async confirmSub() {
				this.reqData.hasReward = false
				const res = await this.checkUser()
				if (res.data) {
					this.$pv.msg('已为您发布')
					await this.openMsg();
					//this.nav_back(1000)
					this.nav_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
					return
				} else {
					this.$pv.msg(res.message)
					this.nav_back(1000)
				}

			},
			openMsg() {
				// #ifdef MP-WEIXIN
				return new Promise((r, j) => {
					wx.requestSubscribeMessage({
						tmplIds: [
							'JjAGfFcjOyiJciTpc6noLLspC7JEet2Gb1Pt3iWh55Y',
							'GJbLgiFQTdYnKSuqPCNtMA-ADkxwONj756WXrUebPdM'
						],
						success(res) {
							r(res);
						},
						fail(err) {
							j(res);
						}
					});
				});
				// #endif
				// #ifdef APP
				return true
				// #endif
			},
			async checkUser() {
				this.$pv.load();
				let checkSub = await this.$api.post('Member/IsPublish');
				let _this = this;
				if (checkSub.data.IsMember == -1) {
					this.$pv.closeLoad();
					uni.showModal({
						title: '温馨提示',
						content: checkSub.message,
						confirmText: "去开通",
						success: function(res) {
							if (res.confirm) {
								_this.nav_to('/pages/user/apply_member');
							} else if (res.cancel) {

							}
						}
					});
					return false;
				}

				this.$pv.load('正在处理');

				const rr = await this.subData();
				return rr
			},
			async sub() {

				if (!this.reqData.ShopID && !this.ShopName) {
					this.$pv.msg('请选择场地');
					return false;
				}
				if (!this.reqData.ServerDate) {
					this.$pv.msg('请选择开球时间');
					return false;
				}

				if (this.userInfo.IsFee == 1) {
					this.customReward = this.userInfo.PlayFee
				} else {
					this.customReward = 2000
				}

				this.reward.show = true
			},

			async subData() {
				this.$pv.load('正在处理')
				let obj = {
					UserID: uni.getStorageSync('user').UserID,
					Price: 0
				};
				let invite = {
					UserID: this.inviteID,
					Price: this.customReward || 0
				};

				let arr = [obj, invite];

				this.reqData.ItemStr = JSON.stringify(arr)
				let res = await this.$api.post('Appointment/Apply', this.reqData)
				return res;
			},

			setTime(e) {
				let n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				let b = uni.$u.timeFormat(e.value, 'hh:MM');
				console.log(n);
				console.log(b);
				this.reqData.ServerDate = n;
				this.reqData.ServerTime = b;
				this.showTime = false;
			},
			formatter(type, value) {
				console.log(type, value);
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分  `;
				}
				return value;
			}
		},
		computed: {
			total_reward() {
				return this.reqData.PeopleNum * this.reqData.reward
			},
			dateTime() {
				if (!this.reqData.ServerDate) {
					return '';
				} else {
					return this.reqData.ServerDate + ' ' + this.reqData.ServerTime;
				}
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
	}
	.pb100 {
		padding-bottom: 100rpx;
	}

	.bg {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.group {
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #eee;
		margin-left: 30rpx;
		margin-right: 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333;
			font-size: 32rpx;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}

	.group2 {
		.lab {
			color: #333;
		}

		.inp_box {
			input {
				color: #333;
			}

			.input-placeholder {
				// color: #FEF0BC;
				color: rgba(254, 240, 188, 0.6);
			}
		}
	}

	.group_textarea {
		height: 200rpx;

		/deep/ .u-textarea {
			background: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: none !important;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #fff !important;
		}

		/deep/ .u-textarea__field {
			color: #fff !important;
		}
	}

	.mt30 {
		margin-top: 30rpx;
	}

	/deep/ .u-radio-group--row {
		justify-content: flex-end;
	}

	/deep/ .u-radio {
		margin-right: 20rpx;
		height: 80rpx;
	}

	.tip {
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #dcc188;
	}

	.imgvideo {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&::after {
			height: 1px;
			width: 220rpx;
			display: block;
			content: '';
		}

		.item_add {
			position: relative;

			&::before,
			&::after {
				display: block;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				position: absolute;
				height: 40rpx;
				width: 8rpx;
				border-radius: 8rpx;
				background: #fff;
				border-radius: 10rpx;
			}

			&::before {
				transform: rotate(90deg);
			}
		}

		.item {
			position: relative;
			margin-top: 15rpx;
			width: 220rpx;
			height: 220rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16rpx;

			.pro {
				position: absolute;
				top: 50%;
				width: 100%;
				transform: translateY(-50%);
				text-align: center;
				color: #888;
			}

			image {
				height: 100%;
				width: 100%;
				border-radius: 16rpx;
			}

			.del_con {
				position: absolute;
				top: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.4);
				height: 40rpx;
				width: 40rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 0 16rpx 0 16rpx;
			}
		}
	}

	.user_vis {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		align-items: center;

		.cover {
			margin-left: 20rpx;
			height: 100rpx;
			width: 100rpx;
			background: #eee;
			border-radius: 60rpx;
			border: 1px solid #eee;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.f2 {
			margin-top: 5rpx;
		}
	}

	.mt100 {
		margin-top: 100rpx;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.dialog {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;

		.dialog-title {
			text-align: center;
			color: #000;
			padding-top: 40rpx;
		}

		.dialog-desc {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.dialog-content {
			font-size: 34rpx;
			display: flex;
			align-items: center;
			padding: 32rpx 44rpx;

			input {
				flex: 1;
				height: 72rpx;
				border-bottom: 1rpx solid #efe8e8;
				color: #000;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.dialog-footer {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #B98B51
			}

			.btn-comfirm {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #FEF0BC;
			}
		}

		.dialog-tip {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}


	.reward_content {
		padding: 20rpx 30rpx;

		.title {
			text-align: center;
			font-weight: 600;
			margin: 20rpx 0 40rpx 0;
		}

		.btn {
			margin: 60rpx 0 30rpx 0;
		}

		.c_btn {
			text-align: center;
			margin: 20rpx 0;
		}

		.group {
			border-bottom: 1px solid rgb(228, 228, 228);

			.lab {
				padding-right: 10rpx;
				color: black;
				font-size: 32rpx;
			}

			.inp_box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-end;

				>view {
					display: flex;
				}

				.total_reward {
					font-size: 28rpx;
					color: rgb(156, 156, 156);
					margin-top: 16rpx;
				}
			}

			.uni_icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		view {
			color: black;
		}
	}
</style>